<template>
  <div class="contain">
    <Scroll class="scroll" :probe-type="3" v-loading="!list.length">
      <ul>
        <li v-for="item in list" :key="item.id" @click="todetail(item)">
          <img v-lazy="item.pic" alt="" />
          <div class="three">
            <p v-for="(text, i) in item.songList.slice(0, 3)" :key="text.id">
              {{ i + 1 + '.' + text.songName + '-' + text.singerName }}
            </p>
          </div>
        </li>
      </ul>
    </Scroll>
  </div>
  <RouterView v-slot="{ Component }">
    <Transition name="slider">
      <component :is="Component" :singer="singer"></component>
    </Transition>
  </RouterView>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getTopList } from '@/services/top-list'
import storage from 'good-storage'
import Scroll from '@/components/base/scroll/scroll.vue'
export default {
  name: 'Toplist',
  components: { Scroll },
  setup () {
    const router = useRouter()
    const loading = ref(true)
    const list = ref([])
    const singer = ref({})
    getTopList().then((res) => {
      list.value = res.topList
      loading.value = false
    })
    const todetail = (item) => {
      singer.value = item
      storage.session.set('__singer__', item)
      router.push(`/top-list/${item.id}`)
    }
    return { list, loading, todetail, singer }
  }
}
</script>

<style scoped lang="scss">
.scroll {
  position: fixed;
  top: 88px;
  bottom: 0;
  width: 100%;
  z-index: -1;
  ul {
    & > li {
      height: 100px;
      margin: 15px 20px;
      display: flex;
      & > img {
        width: 100px;
        height: 100px;
      }
      & > .three {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px;
        height: 100px;
        overflow: hidden;
        background: #333;
        color: rgba(255, 255, 255, 0.3);
        font-size: 12px;
        & > p {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          line-height: 26px;
        }
      }
    }
  }
}
</style>
